<template>
    <div>
        <el-input placeholder="请选择合作方"
                  clearable
                  :value="service_partner_id && service_user_realname ? (service_partner_id + '-' + service_user_realname) : ''"
                  @clear="clear()">
            <template slot="append">
                <span style="cursor: pointer" @click.stop="visible = true">选择</span>
            </template>
        </el-input>
        <el-dialog title="选择合作方" :visible.sync="visible"
                   class="dialog-no-pd"
                   width="60%" destroy-on-close append-to-body>
            <el-card shadow="never">
                <!-- 条件查询 -->
                <el-form v-show="showSearch" ref="queryForm" :model="queryParams" label-width="120px" @keyup.enter.native="submitSearch" @submit.native.prevent>
                    <el-row>
                        <el-col :sm="8">
                            <el-form-item label="所属用户:" prop="user_id.value">
                                <SelectPage v-model="queryParams.user_id.value" :url="'/admin/user/selectPage'" placeholder="请选择用户"
                                            show_field="nickname" show_id="uid" query_field="uid" :multiple="false" />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                            <el-form-item label="真实姓名:" prop="realname.value">
                                <el-input v-model="queryParams.realname.value" placeholder="请输入真实姓名" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                            <el-form-item label="手机号码:" prop="mobile.value">
                                <el-input v-model="queryParams.mobile.value" placeholder="请输入手机号码" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                            <el-form-item label="微信号:" prop="wechat.value">
                                <el-input v-model="queryParams.wechat.value" placeholder="请输入微信号" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                            <el-form-item label="支付宝账号:" prop="alipay.value">
                                <el-input v-model="queryParams.alipay.value" placeholder="请输入支付宝账号" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                            <el-form-item label="身份证号:" prop="idcard.value">
                                <el-input v-model="queryParams.idcard.value" placeholder="请输入身份证号" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                            <el-form-item label="状态:" prop="status.value">
                                <el-select v-model="queryParams.status.value" style="width: 100%" placeholder="请选择状态" clearable>
                                    <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :sm="8">
                            <el-form-item class="ele-text-right" label-width="50px">
                                <el-button type="primary" size="mini" @click="submitSearch" icon="el-icon-search" class="ele-btn-icon">搜索 </el-button>
                                <el-button @click="resetQuery" size="mini" icon="el-icon-refresh">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <!-- 列表 -->
                <qa-table
                    :source="tableData"
                    :columns="columns"
                    :selection="false"
                    :loading="loading"
                    @sortChange="sortChange"
                    @statusChange="statusChange"
                    @selectionChange="selectionChange"
                    id="quickadmin"
                >
                    <template v-slot:moreColumn>
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="微信号">
                                        <span>{{ props.row.wechat || '--' }}</span>
                                    </el-form-item>
                                    <el-form-item label="支付宝账号">
                                        <span>{{ props.row.alipay || '--' }}</span>
                                    </el-form-item>
                                    <el-form-item label="身份证号">
                                        <span>{{ props.row.idcard || '--' }}</span>
                                    </el-form-item>
                                    <el-form-item label="接单量">
                                        <span>{{ props.row.order_quantity }}</span>
                                    </el-form-item>
                                    <el-form-item label="评论数">
                                        <span>{{ props.row.comment_count }}</span>
                                    </el-form-item>
                                    <el-form-item label="好评数">
                                        <span>{{ props.row.comment_how_count }}</span>
                                    </el-form-item>
                                    <el-form-item label="好评率">
                                        <span>{{ props.row.comment_how_svg }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-slot:action>
                        <el-table-column label="操作" width="60">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleChoose(scope.row)">选择</el-button>
                            </template>
                        </el-table-column>
                    </template>
                </qa-table>
                <!-- 分页 -->
                <pagination :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="initIndex" />
            </el-card>
        </el-dialog>
    </div>
</template>
<script>
import { curdMixin } from '@/mixins/curdMixin'
export default {
    name: "choose",
    mixins: [curdMixin],
    props: {
        service_user_id: {
            type: [String, Number],
            default: ''
        },
        service_user_realname: {
            type: [String, Number],
            default: ''
        },
        service_partner_id: {
            type: [String, Number],
            default: ''
        }
    },
    data() {
        return {
            visible: false,
            // table结构
            columns: [
                {
                    visible: true,
                    label: '编号',
                    prop: 'id',
                    width: 70
                },
                {
                    visible: true,
                    label: '所属用户',
                    prop: 'myUser.nickname',
                },
                {
                    visible: true,
                    label: '真实姓名',
                    prop: 'realname',
                },
                {
                    visible: true,
                    label: '手机号码',
                    prop: 'mobile',
                },
                {
                    visible: true,
                    label: '服务中',
                    prop: 'in_progress_order',
                },
                {
                    visible: false,
                    label: '创建时间',
                    prop: 'create_time',
                },
                {
                    visible: true,
                    label: '更新时间',
                    prop: 'update_time',
                },
                {
                    visible: true,
                    label: '状态',
                    prop: 'status',
                    component:'QuickAdminTextColor',
                    formatter: (prop, row) => {
                        let type = ''
                        switch (prop) {
                            case 1:
                                type = 'success'
                                break
                            case 2:
                                type = 'warning'
                                break
                            case 3:
                                type = 'info'
                                break
                        }
                        return {
                            value: prop,
                            type: type,
                            text: row.status_text,
                        }
                    },
                }
            ],
            // 接口地址
            api: {
                index: `/admin/pz.partner/index`,
            },
            // 搜索表单是否展开
            searchExpand: false,
            // 查询参数
            queryParams: {
                user_id: { value: '', op: '='},
                realname: { value:undefined, op: '%like%'},
                mobile: { value:undefined, op: '%like%'},
                wechat: { value:undefined, op: '%like%'},
                alipay: { value:undefined, op: '%like%'},
                idcard: { value:undefined, op: '%like%'},
                status: { value:undefined, op: '='},
            },
            status:[
                { label: "审核中", value: 1 },
                { label: "审核通过", value: 2 },
                { label: "审核失败", value: 3 },
            ],
        }
    },
    methods: {
        handleChoose(row) {
            this.$emit('change', row)
            this.visible = false
        },
        clear() {
            this.$emit('change', {})
        }
    }
}
</script>
